<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title  -->
    <title th:text="${site_name}">Essence - Fashion Ecommerce Template</title>

    <!-- Favicon  -->
    <link rel="icon" th:href="@{/essence/img/core-img/favicon.ico}">

    <!-- Core Style CSS -->
    <link rel="stylesheet" data-th-href="@{/essence/css/core-style.css}">
    <link rel="stylesheet" data-th-href="@{/essence/style.css}">
	  <style>
	  /* Make the image fully responsive */
	  .carousel-inner img {
	      width: 100%;
	      max-height:350px;
	  }
	  </style>    
</head>

<body>
    <!-- ##### Header Area Start ##### -->
    <header class="header_area">
        <div class="classy-nav-container breakpoint-off d-flex align-items-center justify-content-between">
            <!-- Classy Menu -->
            <nav class="classy-navbar" id="essenceNav">
                <!-- Logo -->
                <a class="nav-brand" href="index.html"><img th:src="@{/essence/img/core-img/logo.png}" alt=""></a>
                <!-- Navbar Toggler -->
                <div class="classy-navbar-toggler">
                    <span class="navbarToggler"><span></span><span></span><span></span></span>
                </div>
                <!-- Menu -->
                <div class="classy-menu">
                    <!-- close btn -->
                    <div class="classycloseIcon">
                        <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                    </div>
                    <!-- Nav Start -->
                    <div class="classynav">
                        <ul> 
                            <li th:each="nav : ${navs.children}"><a th:text="${nav.text}" th:href="${nav.url}">Pages</a>
                               <th:block th:if="${not #lists.isEmpty(nav.children)}">
                                <ul class="dropdown">
                                    <li th:each="nav1 : ${nav.children}"><a th:text="${nav1.text}" th:href="${nav1.url}">Home</a></li>
                                </ul>
                                </th:block>
                            </li>
                        </ul>
                    </div>
                    <!-- Nav End -->
                </div>
            </nav>

            <!-- Header Meta Data -->
            <th:block data-th-include="themes/essence/hmeta"></th:block>
            <!-- Header Meta Data end -->

        </div>
    </header>
    <!-- ##### Header Area End ##### -->

    <!-- ##### Right Side Cart Area ##### -->
    <th:block data-th-include="themes/essence/cart"></th:block>
    <!-- ##### Right Side Cart End ##### -->
    <!-- ##### Welcome Area Start ##### -->
    <section class="welcome_area bg-img background-overlay">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12">
					<div id="banners" class="carousel slide" data-ride="carousel">
					 
					  <!-- 指示符 -->
					  <ul class="carousel-indicators" id="carouselIndicators">
					  </ul>
					  <!-- 轮播图片 -->
					  <cms:banners>
						  <div class="carousel-inner" >
						    <div th:each="banner,state:${banners}" class="carousel-item" th:classappend="${state.index==0}? 'active'">
						      <a th:href="${banner.openUrl}" th:target="${banner.openTarget}" th:title="${banner.title}"><img th:src="${banner.imgPath}" th:alt="${banner.title}"></a>
						    </div>
						  </div>
					  </cms:banners>
					  <!-- 左右切换按钮 -->
					  <a class="carousel-control-prev" href="#banners" data-slide="prev">
					    <span class="carousel-control-prev-icon"></span>
					  </a>
					  <a class="carousel-control-next" href="#banners" data-slide="next">
					    <span class="carousel-control-next-icon"></span>
					  </a>
					 
					</div>
                </div>
            </div>
        </div>
    </section>
    <!-- ##### Welcome Area End ##### -->
    <!-- ##### Top Catagory Area Start ##### -->
    <div class="top_catagory_area section-padding-80 clearfix">
        <div class="container">
            <div class="row justify-content-center">
               <cms:productCategoryList count="3" recommend="1">
                <!-- Single Catagory -->
                <div class="col-12 col-sm-6 col-md-4" th:each="category:${categorys}">
                    <div class="single_catagory_area d-flex align-items-center justify-content-center bg-img" th:style="'background-image:url(' + @{(${category.thumbnail})} + ');'" >
                        <div class="catagory-content">
                            <a th:href="@{${'/productCategory/'+category.slug}}" th:text="${category.name}">分类名称</a>
                        </div>
                    </div>
                </div>
               </cms:productCategoryList> 
            </div>
        </div>
    </div>
    <!-- ##### Top Catagory Area End ##### -->

    <!-- ##### CTA Area Start ##### -->
    <div class="cta-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="cta-content bg-img background-overlay" style="background-image: url(/essence/img/bg-img/bg-5.jpg);">
                        <div class="h-100 d-flex align-items-center justify-content-end">
                            <div class="cta--text">
                                <h6>最高-60%</h6>
                                <h2>最新折扣(专题)</h2>
                                <a href="/productTopic/prodiscount" class="btn essence-btn">马上买</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ##### CTA Area End ##### -->

    <!-- ##### New Arrivals Area Start ##### -->
    <section class="new_arrivals_area section-padding-80 clearfix">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-heading text-center">
                        <h2>热销商品</h2>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="popular-products-slides owl-carousel">
                        <cms:hotProductList  categoryId="2" count="5">
                        <!-- Single Product -->
                        <div class="single-product-wrapper" th:each="product,iterStat : ${pageInfo.list}">
                            <!-- Product Image -->
                            <div class="product-img">
                                <img th:src="${product.thumbnail}" alt="">
                                <!-- Hover Thumb -->
                                <img class="hover-img" th:src="${product.thumbnail}" alt="">
                                <!-- Favourite -->
                                <div class="product-favourite">
                                    <a href="#" class="favme fa fa-heart"></a>
                                </div>
                            </div>
                            <!-- Product Description -->
                            <div class="product-description">
                                <span>topshop</span>
                                <a th:href="@{${product.linkUrl}}">
                                    <h6 th:text="${product.title}">Knot Front Mini Dress</h6>
                                </a>
                                <p class="product-price" th:if="${product.price} eq ${product.originPrice}" th:text="${product.price}" >$80.00</p>
                                <p class="product-price" th:if="${product.price} ne ${product.originPrice}"><span class="old-price" th:text="${product.originPrice}">$75.00</span> <th:block th:text="${product.price}">$55.00</th:block></p>

                                <!-- Hover Content -->
                                <div class="hover-content">
                                    <!-- 浏览 -->
                                    <div class="add-to-cart-btn">
                                        <a th:href="@{${product.linkUrl}}" class="btn essence-btn">浏览</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </cms:hotProductList>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="popular-products-slides owl-carousel">
                        <cms:hotProductList  categoryId="3" count="5">
                        <!-- Single Product -->
                        <div class="single-product-wrapper" th:each="product,iterStat : ${pageInfo.list}">
                            <!-- Product Image -->
                            <div class="product-img">
                                <img th:src="${product.thumbnail}" alt="">
                                <!-- Hover Thumb -->
                                <img class="hover-img" th:src="${product.thumbnail}" alt="">
                                <!-- Favourite -->
                                <div class="product-favourite">
                                    <a href="#" class="favme fa fa-heart"></a>
                                </div>
                            </div>
                            <!-- Product Description -->
                            <div class="product-description">
                                <span>topshop</span>
                                <a th:href="@{${product.linkUrl}}">
                                    <h6 th:text="${product.title}">Knot Front Mini Dress</h6>
                                </a>
                                <p class="product-price" th:if="${product.price} eq ${product.originPrice}" th:text="${product.price}" >$80.00</p>
                                <p class="product-price" th:if="${product.price} ne ${product.originPrice}"><span class="old-price" th:text="${product.originPrice}">$75.00</span> <th:block th:text="${product.price}">$55.00</th:block></p>

                                <!-- Hover Content -->
                                <div class="hover-content">
                                    <!-- 浏览 -->
                                    <div class="add-to-cart-btn">
                                        <a th:href="@{${product.linkUrl}}" class="btn essence-btn">浏览</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </cms:hotProductList>
                    </div>
                </div>
            </div>            
        </div>
    </section>
    <!-- ##### New Arrivals Area End ##### -->
    <!-- ##### Footer Area Start ##### -->
    <th:block data-th-include="themes/essence/footer"></th:block>
    <!-- ##### Footer Area End ##### -->
    <!-- jQuery (Necessary for All JavaScript Plugins) -->
    <script data-th-src="@{/essence/js/jquery/jquery-2.2.4.min.js}"></script>
    <script data-th-src="@{/essence/js/jquery.tmpl.min.js}"></script>
    <!-- Popper js -->
    <script data-th-src="@{/essence/js/popper.min.js}"></script>
    <!-- Bootstrap js -->
    <script data-th-src="@{/essence/js/bootstrap.min.js}"></script>
    <!-- Plugins js -->
    <script data-th-src="@{/essence/js/plugins.js}"></script>
    <!-- Classy Nav js -->
    <script data-th-src="@{/essence/js/classy-nav.min.js}"></script>
    
    <!-- Active js -->
    <script data-th-src="@{/essence/js/active.js}"></script>
    <script data-th-src="@{/essence/js/product.js}"></script>
    <script data-th-src="@{/essence/js/sku.js}"></script> 
    <script data-th-inline="javascript">
    var ctx = [[@{/}]];
      // 初始化购物车
    $Product.refreshCart();
      // banner初始化
    var len  = $("#banners .carousel-item").length;
    for(var i=0;i<len;i++){
    	if(i==0){
    		$("#carouselIndicators").append('<li data-target="#banners" data-slide-to="'+i+'" class="active"></li>');
    	}else{
    		$("#carouselIndicators").append('<li data-target="#banners" data-slide-to="'+i+'" ></li>');
    	}
    }
    </script>
</body>

</html>